<template>
    <ph-list-item :class="cns" ref="edom" @click="onSelect">
        <icon v-if="multiple" ph-mr :icon="active?'check-square':'square-o'"/><span><slot></slot></span>
    </ph-list-item>
</template>
<script lang="ts">
import { computed, defineAsyncComponent, defineComponent, inject, onMounted, Ref, ref} from 'vue'
import {PhListItem} from '../../list'
export default defineComponent({
    name:"PhOption",
    components:{
        Icon:defineAsyncComponent(()=>import("../../base/icon.vue")),
        PhListItem
    },
    props:{
        value:{type:[String,Number],default:""}
    },
    setup(props) {
        const update = inject("update",Function,true)
        const addOption = inject("addOption",Function,true)
        const cvalue = inject("cvalue") as Ref<Array<string|number>>
        const multiple = inject<Ref<boolean>>("multiple")
        const edom = ref<{getText:()=>string}|null>(null)
        const active = computed(()=>{
            return cvalue?.value.includes(props.value)
        })
        const cns = computed(()=>{
            return{
                'ph-option':true,
                'ph-active':active.value,
                'ph-mulitple':multiple?.value
            }
        })
        const onSelect = (e:Event)=>{
            const target = e.target as HTMLElement
            update({
                value:props.value,
                selected:multiple?.value?!active.value:true,
                text:target.innerText
            })
        }
        onMounted(()=>{
            addOption({
                value:props.value,
                text:edom?.value?.getText()
            })
        })
        return {active,onSelect,edom,multiple,cns}
    },
})
</script>
<style lang="scss">
.ph-option{
    padding: var(--ph-8) var(--ph-15);
    cursor: pointer;
    white-space: nowrap;
    &:not(.ph-active):hover{
        background-color: var(--ph-light-l1);
    }
    &.ph-active{
        background-color: var(--ph-theme);
        color: #FFF;
    }
}
</style>
